<template>
    <div id="spry">
        <!-- 渲染首图 -->
        <section class="section-1">
             <div class="container">
                <h1>雨燕便携式防水无人机</h1>
                <img src="https://cdn.swellpro.com/ff1/pc/agile-drone.png" alt="Spry">
                <p>雨燕整机防水，遥控器同样具备防水优势，可在涉水环境中肆意翱翔。一体化机身设计，体积小，性能强大，轻松掌控。可拍摄4K/30fps 超清视频，具备强大的智能跟随功能，让您在运动状态时也能享受飞行带来的乐趣。</p>
                <img src="https://cdn.swellpro.com/ff1/pc/main-features-2.png" alt="main-features" id="main-features">
            </div>
        </section>

        <!-- 第二幅图 -->
        <section class="waterproof-feature pc-back-config">
            <p>100%整机防水</p>
        </section>

        <!-- 第三幅图文字 -->
        <section class="waterproof-drone-content">
            <div class="container">
                <h2>整机防水，肆意飞翔</h2>
                <p>
                    全新一体化设计的机身自带浮力，电机和外壳皆为耐腐蚀材质，适用于海水和淡水环境。轻松实现雨天飞行，水面飞行。
                </p>
            </div>
        </section>

        <!-- 第三幅图片 -->
        <div class="waterproof-drone pc-back-config">
        </div>

        <!-- 第四幅整图 -->
        <section class="waterproof-remote-controller">
            <div class="container">
                <div class="left">
                    <div>
                        <h2>防水遥控器</h2>
                        <p>遥控器拥有防水设计，持握手感舒适。操纵杆、内置元器件和所有按钮皆防水。可在雨天或进行水上运动时使用，大大提高可玩性。</p>
                    </div>
                </div>
                <div class="right">
                    <img src="https://cdn.swellpro.com/ff1/pc/waterproof-remote-controller.png" alt="waterproof-remote-controller">
                </div>
            </div>
        </section>

        <!-- 第五幅整图 -->
        <section class="camera-features back">
            <p class="fadeInUpSlow">小巧机身，大有智慧</p>
        </section>

        <!-- 第六幅图 -->
        <section class="camera-of-agile">
            <div class="container">
                <h2>4K/30fps高清视频录制</h2>
                <div>
                    <p>小巧机身富含卓越性能，雨燕采用索尼1 / 2.3’CMOS传感器镜头，最大限度地减少鱼眼效果。支持以 64Mbps 码流录制 4K/30fps 高清视频，画质效果出众。可拍摄1200万像素的高品质静态照片。</p>
                </div>
                <img src="https://cdn.swellpro.com/ff1/pc/agile-4k-camera.png" alt="Spry-4k-camera">
                <div class="camera-feature">
                    <div class="item left">
                        <div>
                            <p class="title">4K 30FPS</p>
                            <p>视频</p>
                        </div>
                    </div>
                    <div class="item right">
                        <div>
                            <p class="title">12MP</p>
                            <p>静态照片</p>
                        </div>
                    </div>
                    <div class="item left">
                        <div>
                            <p class="title">Up to 64GB</p>
                            <p>最大内存</p>
                        </div>
                    </div>
                    <div class="item right">
                        <div>
                            <p class="title">Wi-Fi</p>
                            <p>连接</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 第七幅图 -->
        <section class="Stabilization">
            <div class="container">
                <h2>电子增稳</h2>
                <p>雨燕搭载舵机云台，相机具有92.6°视角，视野广阔，可利用遥控调节相机镜头角度。电子图像增稳系统与舵机云台相结合，可拍摄出更为清晰流畅的视频和照片，为您呈现精彩画面。
                </p>
                <div class="pics">
                    <img src="https://cdn.swellpro.com/ff1/pc/electronic-image-stabilization.png" alt="electronic-image-stabilization" class="needMobileSrc">
                </div>
            </div>
        </section>

        <!-- 第八幅图 -->
        <section class="camera-dome pc-back-config">
            <div class="container">
                <h2>镜头保护罩</h2>
                <p>雨燕防水无人机4K相机密封在光学玻璃保护罩内，可以让相机镜头不受损伤。特殊设计的保护罩具有高透明度而不失真，还能遮蔽过多的眩光。
                </p>
                <img src="https://cdn.swellpro.com/ff1/pc/waterproof-camera-dome.png" alt="waterproof-camera-dome">
            </div>
        </section>

       <!-- 第九幅图 -->
        <section class="smart-features">
            <p>智能模式</p>
        </section>

        <!-- 第十幅图 -->
        <section class="smart-features-item">
            <div class="container">
                <div class="selects">
                    <div  :class="['select-title', {'active': open == 1}]" @click="changeOpen(1)">
                        <p>智能跟随</p>
                    </div>
                    <div  :class="['select-title', {'active': open == 2}]"  @click="changeOpen(2)">
                        <p>兴趣点跟随环绕</p>
                    </div>
                    <div  :class="['select-title', {'active': open == 3}]"  @click="changeOpen(3)">
                        <p>自动返航</p>
                    </div>
                </div>
                <div class="selects-content">
                    <div :class="['selects-content-item', {'active': open == 1}]"><img src="https://cdn.swellpro.com/ff1/pc/autonomous-follow-me.jpg" alt="autonomous-follow-me">
                        <p>雨燕防水无人机采用强大的内置运动算法，使自动跟随功能更加智能，识别精度更高。预设一个高度和距离，无论你是走路或是跑步，它都能根据预设的数据，实现自动跟随。</p>
                    </div>
                    <div :class="['selects-content-item', {'active': open == 2}]"><img src="https://cdn.swellpro.com/ff1/pc/autonomous-follow-in-orbit.jpg"
                            alt="autonomous-follow-in-orbit">
                        <p>只需轻轻切换一个开关，雨燕就能从智能跟随模式变为兴趣点环绕模式。围着兴趣中心点进行360度环绕飞行。当中心点移动时，雨燕能在环绕飞行过程中同时保持跟随模式。</p>
                    </div>
                    <div :class="['selects-content-item', {'active': open == 3}]"><img src="https://cdn.swellpro.com/ff1/pc/return-to-boat.jpg" alt="return-to-boat">
                        <p>普通飞行器会在起飞时自动记录返航点，当遇到通讯中断、电量不足或收到返航指令时，将自动返回发射点。雨燕则可以在飞行过程中根据用户的位置动态调整，返回到远程控制器的位置。就算身处一艘移动的船上，它也能自动返回到你的身边。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 第十一幅图 -->
        <section class="enhanced-controls">
            <div class="container">
                <div>
                    <h2>更多功能</h2>
                    <p>移动设备与雨燕防水无人机APP配对连接，可以实现更多智能功能</p>
                </div>
                <div class="controls">
                    <div class="item"><img src="https://cdn.swellpro.com/ff1/pc/one-key-launch.png" alt="one-key-launch">
                        <p>一键起飞</p>
                    </div>
                    <div class="item"><img src="https://cdn.swellpro.com/ff1/pc/tap-fly.png" alt="tap-fly">
                        <p>指点飞行</p>
                    </div>
                    <div class="item"><img src="https://cdn.swellpro.com/ff1/pc/orbit-flights.png" alt="orbit-flights">
                        <p>环绕飞行</p>
                    </div>
                    <div class="item"><img src="https://cdn.swellpro.com/ff1/pc/auto-return-home.png" alt="auto-return-home">
                        <p>自动返航</p>
                    </div>
                    <div class="item"><img src="https://cdn.swellpro.com/ff1/pc/autonomous-navigation.png" alt="autonomous-navigation">
                        <p>航线规划</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 第十二幅图 -->
        <section class="agile-speed pc-back-config back">
            <div class="container">
                <h2>匹配竞赛级马达，速度惊艳</h2>
                <p>在手动模式下，高推力电机和大功率ESCs让雨燕速度高达70公里/小时以上。</p>
            </div>
        </section>

        <!-- 第十三幅图 -->
        <section class="fiming-tool">
            <h2>使用场景</h2>
            <img src="https://cdn.swellpro.com/ff1/pc/watersports-2.jpg" alt="watersports">
        </section>

         <!-- 第十四幅图 -->
        <section class="agile-design">
            <div class="container">
                <h2>精湛设计水准，只为呈现更好一面</h2>
                <div class="designs">
                    <div class="left">
                        <div :class="['left-item', {'active': active == 1}]" @mouseover="changeActive(1)">气动框架</div>
                        <div :class="['left-item', {'active': active == 2}]" @mouseover="changeActive(2)">散热效果佳</div>
                        <div :class="['left-item', {'active': active == 3}]" @mouseover="changeActive(3)">着陆缓冲器</div>
                        <div :class="['left-item', {'active': active == 4}]" @mouseover="changeActive(4)">特殊舱盖</div>
                        <div :class="['left-item', 'border-none', {'active': active == 5}]" @mouseover="changeActive(5)">轻松掌控</div>
                    </div>
                    <div class="right">
                        <div  :class="['design-item', {'active': active == 1}]">
                            <div class="top"><img src="https://cdn.swellpro.com/ff1/pc/aerodynamics-design.jpg" alt="aerodynamics-design"
                                    class="needMobileSrc" msrc="aerodynamics-design-m.jpg">
                                <div class="design-text">
                                    <p>雨燕防水无人机的机身按照仿生学的气动外形，拥有流线型设计，最大限度降低风阻。有效提高飞行速度。</p>
                                </div>
                            </div>
                        </div>
                        <div :class="['design-item', {'active': active == 2}]">
                            <div class="top"><img src="https://cdn.swellpro.com/ff1/pc/heat-dissipation.jpg" alt="aerodynamics-design"
                                    class="needMobileSrc" msrc="heat-dissipation-m.jpg">
                                <div class="design-text">
                                    <p>雨燕整机防水，但依然能保持良好散热性能。通过铝制散热器阵列使飞行器快速散热到密封框架的外部而冷却。</p>
                                </div>
                            </div>
                        </div>
                        <div :class="['design-item', {'active': active == 3}]">
                            <div class="top"><img src="https://cdn.swellpro.com/ff1/pc/landing-bumpers.jpg" alt="aerodynamics-design"
                                    class="needMobileSrc" msrc="landing-bumpers-m.jpg">
                                <div class="design-text">
                                    <p>雨燕配有四个橡胶缓冲器，在着陆时吸收振动，让飞行器多重保护。</p>
                                </div>
                            </div>
                        </div>
                        <div :class="['design-item', {'active': active == 4}]">
                            <div class="top"><img src="https://cdn.swellpro.com/ff1/pc/hatch-lid-air-vent.jpg" alt="aerodynamics-design"
                                    class="needMobileSrc" msrc="hatch-lid-air-vent-m.jpg">
                                <div class="design-text">
                                    <p>雨燕机身有专门设计的舱口通风，同时能防止水进入。盖子的设计还可以防止打开时飞行器机身上的水进入内部。</p>
                                </div>
                            </div>
                        </div>
                        <div :class="['design-item', {'active': active == 5}]">
                            <div class="top"><img src="https://cdn.swellpro.com/ff1/pc/external-switch.jpg" alt="aerodynamics-design"
                                    class="needMobileSrc" msrc="external-switch-m.jpg">
                                <div class="design-text">
                                    <p>只需在遥控器上按下按钮，雨燕就能快速响应指令并完成相应操作，没有复杂的程序设置，简单易用，轻松操控。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 第十五幅图 -->
        <section class="end-title">
            <h2>迎雨翱翔，灵巧如燕</h2>
        </section>

        <!-- 第十六幅图 -->
        <section class="end" style="background:#fff">
            <a id="buy" href="https://z.jd.com/project/details/105213.html?from=jr_search&type=0">
                购买雨燕防水无人机
            </a>
        </section>


    </div>
</template>

<script>
export default {
    data() {
        return {
            open: 1,
            active: 1,
        }
    },

    head() {
        return {
            title: '雨燕便携防水无人机',
            meta: [
                { hid: 'description', name: 'description', content: '雨燕便携防水无人机是斯威普科技目前为止体积最小的一款防水无人机。雨燕整机防水，包括遥控器也有防水功能。可拍摄4K/30fps超清视频，并具备强大的智能跟随功能。' },
                { hid: 'keywords', name: 'keywords', content: '雨燕便携防水无人机、防水无人机、斯威普' }
            ]
        }
    },

    components: {},

    computed: {},

    mounted() {},

    methods: {
        changeOpen(index) {
            this.open = index
        },

        changeActive(index) {
            this.active = index
        }
    }
}
</script>
<style lang='stylus' scoped>
#spry
    font-weight 300
    .container
        width 1000px
    p
        color #434343
        line-height 25px
    h1
        font-size 40px
        padding 41px 0 37px
        color #434343
        text-align center
    h2
        padding 35px 0 31px
        font-size 35px
        color #242424
        text-transform uppercase
    .section-1
        background #f1f1f1
        img
            display block
            width 100%
            padding-bottom 35px
        p
            width 700px
            margin 0 auto
            font-size 18px
            font-weight 400
            line-height 30px
            padding-bottom 30px
        #main-features
            width 700px
            margin 0 auto
    .pc-back-config
        background-position center
        background-size cover
        background-repeat no-repeat
    .waterproof-feature
        width 100%
        height 300px
        background-image url('https://cdn.swellpro.com/ff1/pc/waterproof-feature.jpg')
        display flex
        justify-content center
        align-items center
        color #ffffff
        font-size 35px
        font-weight 800
        p
            color #ffffff
            line-height 25px
    .waterproof-drone-content
        background #f1f1f1
        .container
            width 800px
            p
                font-size 18px
                line-height 30px
                padding-bottom 20px
    .waterproof-drone
        width 100%
        height 450px
        background-image url('https://cdn.swellpro.com/ff1/pc/waterproof-drone.jpg')
    .waterproof-remote-controller
        background #f1f1f1
        padding 30px 0 72px
        .container
            width 1000px
            display flex
            .left
                flex 0 0 50%
                display flex
                align-items center
    .waterproof-remote-controller
        background #f1f1f1
        padding 30px 0 72px
        .container
            display flex
            .left
                flex 0 0 50%
                display flex
                align-items center
            .right
                flex 0 0 50%
                img
                    width 100%
    .camera-features
        width 100%
        height 300px
        background-image url('https://cdn.swellpro.com/ff1/pc/camera-features.jpg')
        display flex
        justify-content center
        align-items center
        color #fff
        font-size 35px
        font-weight 800
        p
            color #fff
    .camera-of-agile
        background #f1f1f1
        p
            line-height 25px
        img
            display block
            width 70%
            margin 0 auto
        .camera-feature
            display flex
            padding 60px 0 40px
            .item
                flex 1
                display flex
                justify-content center
                align-items center
                div
                    p
                        font-size 17px
                        font-weight 400
                        color #434343
                    .title
                            color #00a0e9
                            font-size 25px
                            font-weight 600
                            padding-bottom 15px
    .Stabilization
        h2
            text-align center
        .pics
            padding 24px 0 50px
            display flex
            justify-content space-between
            img
                width 1000px
    .camera-dome
        background #f1f1f1
        h2
            padding 70px 0 30px
            text-align center
        p
            padding-bottom 36px
        img
            display: block
            width: 60%
            margin: 0 auto
    .smart-features
        width 100%
        height 300px
        background-image url('https://cdn.swellpro.com/ff1/pc/smart-features.jpg')
        display flex
        justify-content center
        align-items center
        color #fff
        font-size 35px
        font-weight 800
        p
            color #fff
    .smart-features-item
        padding 45px 32px
        background #f1f1f1
        .selects
            display flex
            padding-bottom 20px
            border-bottom 2px solid #c8c8c8
            .select-title
                flex 1
                p
                    text-align center
                    font-size 22px
                    font-weight 800
                    color rgba(36,36,36,.5)
                    cursor pointer
                    position relative
                    transition all .3s
                    &:before
                        content ""
                        position absolute
                        width 100%
                        height 2px
                        background #242424
                        left 0
                        bottom -22px
                        transition all .3s
                        transform scale(0)
            .active
                p
                    &:before
                        transform scale(1)
        .selects-content
            padding-top 40px
            .selects-content-item
                display none
                img
                    display block
                    width 100%
                    padding-bottom 30px
            .active
                display block
    .enhanced-controls
        .container
            width 800px
            h2
                text-align center
            p
                text-align center
            .controls
                display flex
                padding 60px 0
                .item   
                    flex 1
                    box-sizing border-box
                    img
                        width 100px
                        height 90px
                    p
                        padding-bottom 15px
                        text-align left
                        padding-left 20px
    .agile-speed
        width 100%
        height 600px
        background-image url('https://cdn.swellpro.com/ff1/pc/high-speed-flying.jpg')
        color #fff
        .container
            width 800px
            h2
                color #fff
                text-align center
            p
                color #fff
    .fiming-tool
        background #f1f1f1
        h2
            text-align center
        img
            width 100%
    .end-title
        background #424242
        h2
            color #fff
            text-align center
            padding 45px 0
    .end
        padding-bottom 60px
        #buy
            display block
            width 30%
            padding 25px 0px
            background rgb(242, 100, 68)
            margin 60px auto 0px
            border-radius 20px
            color rgb(255, 255, 255)
            text-align center
            font-size 20px
            cursor pointer
    .agile-design
        background #f1f1f1
        padding-bottom 70px
        .container
            width 800px
            h2
                text-align center
            .designs
                display flex
                justify-content space-between
                height 432px
                .left
                    flex 0 0 33%
                    background #dadada
                    box-sizing border-box
                    padding 0 8px
                    .left-item
                        width 100%
                        height 86.4px
                        border-bottom 1px solid rgba(0,0,0,.2)
                        display flex
                        justify-content center
                        align-items center
                        font-size 20px
                        font-weight 400
                        color rgba(36,36,36,.5)
                        transition all .3s
                        cursor pointer
                    .border-none
                        border-bottom-width 0
                    .active
                        color #469de3
                .right
                    flex 0 0 65%
                    .design-item
                        display none
                        .top
                            width 100%
                            height 432px
                            position relative
                            img
                                width 100%
                                height 100%
                            .design-text
                                width 100%
                                position absolute
                                bottom 0
                                height 105px
                                left 0
                                box-sizing border-box
                                padding 0 20px
                                display flex
                                justify-content center
                                align-items center
                    .active
                        display block
</style>